<template>
	<view class="container">
		<view class="catalog">
			<view>
				<text>支付宝账号</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.account" placeholder="请输入支付宝账号" placeholder-class="plaho"/>
			</view>
			<view>
				<text>真实姓名</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.userName" placeholder="请输入真实姓名" placeholder-class="plaho"/>
			</view>
		</view>
		
		<view class="button" @click="handleBindAlipay(hasAccount)">{{ hasAccount ? '更改账号' : '立即绑定'}}</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				hasFlag: false,//是否加载完成
				userBank: { //提交账户参数
					account: '',
					userName: '',
					type: 0,//0 支付宝,2银行卡，1微信
				},
				hasAccount: false,
			}
		},
		methods: {
			// 提交绑定
			async handleBindAlipay(flag) {
				if (flag == true) {
					this.hasAccount = false
					this.userBank.account = ''
					this.userBank.userName = ''
				}else {
					if(!this.userBank.account) return uni.showToast({ title: '请输入您的支付宝账号', icon: 'none' })
					if(!this.userBank.userName) return uni.showToast({ title: '请输入您的姓名', icon: 'none' })
					let res = await this.$fetch(this.$api.bind_user_bank, this.userBank, 'POST', 'JSON')
					if (res.code) {
						uni.showToast({ title: res.msg, icon: 'none' })
						if(res.msg == '绑定失败:请先进行实名认证'){
							setTimeout(() => { uni.navigateTo({ url: '/pages/real-name/real-name' }) }, 800)
						}
						return
					}
					uni.showToast({ title: '绑定成功~', icon: 'none' })
					this.hasAccount = true
					setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 800)
				}
				
			},
			// 获取已绑定的账号
			async query_bind_user_bank () {
				let res = await this.$fetch(this.$api.query_bind_user_bank, {}, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				res.data.forEach(item=> {
					if(item.type === 0) {
						this.userBank.account = item.account
						this.userBank.userName = item.userName
						this.hasAccount = true
					}
				})
			},
			
		},
		onLoad() {
		},
		onShow() {
			this.query_bind_user_bank()// 获取已绑定的账号
		}
	}
</script>

<style lang="less">
.container {
	// border: 1px solid #000000;
	overflow: hidden;
	position: relative;
	
	.catalog {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		& > view {
			padding: 0 30rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			& > text {
				height: 40rpx;
				margin: 30rpx 0;
			}
			& > input {
				// border: 1px solid #000000;
				flex: 1;
				text-align: right;
				font-size: 14px;
				font-weight: bold;
			}
			.plaho {
				font-weight: normal;
				font-size: 14px;
				color: rgba(64,33,16,0.50);
			}
			
			& > view {
				display: flex;
				align-items: center;
				& > text {
					margin-right: 30rpx;
					color: rgba(64,33,16,0.50);
				}
				& > image {
					width: 16rpx;
					height: 26rpx;
				}
			}
			&::after {
				content: "";
				position: absolute;
				top: 100rpx;
				width: 720rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
		}
	}
	.button {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background: #FCC928;
		display: flex;
		justify-content: center;
		align-items: center;
		// letter-spacing: 0;
		
		&:active {
			opacity: 0.7;
		}
	}
}
</style>
